<template>
  <div class="home-page">
   
    <!-- 顶部轮播图 -->
    <nut-swiper class="home-banner" :auto-play="3000" pagination-visible>
      <nut-swiper-item v-for="banner in bannerList" :key="banner.id">
        <img :src="banner.imgUrl" :alt="banner.title" />
      </nut-swiper-item>
    </nut-swiper>

    <div class="intro-header">
      <div>{{ $t('introduction') }}</div>
      <a href="https://github.com/sunniejs/vue-h5-template.git">
        <Github />
      </a>
    </div>

    <!-- 信息公告 -->
    <div class="announcement-section">
      <div class="announcement-header">
        <span class="announcement-title">信息公告</span>
        <span class="announcement-subtitle">了解最新通知</span>
      </div>
      <div class="announcement-list">
        <div class="announcement-item" v-for="item in announcementList" :key="item.id">
          <div class="announcement-tag">{{ item.tag }}</div>
          <div class="announcement-content">
            <p class="announcement-text">{{ item.content }}</p>
            <p class="announcement-time">{{ item.time }}</p>
          </div>
        </div>
      </div>
    </div>

   
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { setLang } from '@/i18n';
  import { useI18n } from 'vue-i18n';
  import { Github, Check } from '@nutui/icons-vue';

  const { locale } = useI18n();

  const bannerList = ref([
    {
      id: 1,
      imgUrl: 'https://cdn.jsdelivr.net/gh/fonghehe/picture/vue-h5-template/banner1.jpg',
      title: '快速理赔，安心无忧',
    },
    {
      id: 2,
      imgUrl: 'https://cdn.jsdelivr.net/gh/fonghehe/picture/vue-h5-template/banner2.jpg',
      title: '冬季出行特别保障',
    },
    {
      id: 3,
      imgUrl: 'https://cdn.jsdelivr.net/gh/fonghehe/picture/vue-h5-template/banner3.jpg',
      title: '多渠道支付，便捷体验',
    },
  ]);

  const announcementList = ref([
    {
      id: 1,
      tag: '通知',
      content: '2024 Q4 对账工作即将开展，请及时核对订单。',
      time: '2024-11-20',
    },
    {
      id: 2,
      tag: '提醒',
      content: 'OCR 身份识别功能升级，识别准确率提升 35%。',
      time: '2024-11-18',
    },
    {
      id: 3,
      tag: '更新',
      content: '新增 POS 支付渠道，欢迎各位合作伙伴体验。',
      time: '2024-11-15',
    },
  ]);

  const cellList = ['vue3', 'vite', 'vue-router', 'axios', 'Pinia', 'vue-i18n', 'postcss-px-to-viewport', 'varlet / vant / nutUI', 'eruda'];

  const changeLang = (type: string) => {
    setLang(type);
  };
</script>

<style lang="scss">
  @use '@/styles/mixin.scss' as *;

  .home-page {
    padding-bottom: 20px;
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 40px;

    img {
      width: 90px;
      height: 90px;
    }
  }

  .intro-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    font-size: 24px;
  }

  .home-banner {
    margin: 12px 16px;
    border-radius: 12px;
    overflow: hidden;

    img {
      width: 100%;
      height: 160px;
      display: block;
      object-fit: cover;
    }
  }

  .announcement-section {
    margin: 0 16px 12px;
    padding: 16px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .announcement-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .announcement-title {
        font-size: 28px;
        font-weight: 600;
        color: #333;
      }

      .announcement-subtitle {
        font-size: 22px;
        color: #999;
      }
    }

    .announcement-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .announcement-item {
      display: flex;
      gap: 12px;

      .announcement-tag {
        padding: 4px 10px;
        font-size: 22px;
        color: #fff;
        background: linear-gradient(135deg, #36d1dc 0%, #5b86e5 100%);
        border-radius: 20px;
        flex-shrink: 0;
      }

      .announcement-content {
        flex: 1;

        .announcement-text {
          margin: 0;
          font-size: 24px;
          color: #333;
        }

        .announcement-time {
          margin: 4px 0 0;
          font-size: 20px;
          color: #999;
        }
      }
    }
  }

  .supportList {
    margin: 0 16px;

    .nut-cell-group__title {
      margin-top: 30px;
    }
  }

  .btn-wrap {
    margin: 20px;
  }

  .btn-confirm {
    @include main-lang-bg(302px, 82px, '@/assets/button', 'confirm.png');
  }
</style>
